<template>
    <div>
        <h2>商铺信息列表</h2>
        <div>
            商铺名称:<input type="text" >
            商铺状态：<select v-model="info.stateid">
                <option value="">请选择</option>
                <option >出租中</option>
                <option >空置</option>
            </select>
            <input type="button" value="查询" class="btn btn-primary"
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>商铺名称</td>
                    <td>商铺楼层</td>
                    <td>业主/租户</td>
                    <td>联系电话</td>
                    <td>建筑/室内面积</td>
                    <td>租金</td>
                    <td>商铺状态</td>
                    <td>操作</td>
                </tr>
                 <tr v-for="item in info.data">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.ShopNum }}</td>
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ item.MianJi }}</td>
                    <td>{{ item.Money.toFixed(2) }}</td>
                    <td>{{ item.StateName }}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import {ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'

const router = useRouter();
const route = useRoute();

let info:any = reactive({
    shopname:'',
    stateid:''
})

onMounted(()=>{
    getshoplist();
    getstate();
})

const getshoplist = ()=>{
    axios({
        url:'/api/Shops/GetShopDTO',
        method:'get',
        params:info
    })
    .then((res)=>{
        console.log(res);
        info.value = res.data
    })
    .catch((err)=>{
        console.log(err);
        
    })
}

const getstate=()=>{
    axios({
        url:'/api/Shops/GetStateType',
        method:'get',
    })
     .then((res)=>{
        console.log(res);
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
</script>

<style scoped>
input{
    margin: 0 5px;
}
</style>